<template>
  <div class="p-6 max-w-3xl mx-auto">
    <el-button @click="$router.back()" class="mb-4">返回</el-button>

    <template v-if="blog">
      <h1 class="text-3xl font-bold mb-2">{{ blog.title }}</h1>
      <p class="text-gray-500 mb-6">
        发布于 {{ formatDate(blog.createdTime) }}
      </p>
      <v-md-editor :model-value="blog.content" height="auto" />
    </template>

    <el-empty v-else description="博客加载中..." />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getBlogDetail } from '../api/blogDetail' // ✅ 你需要创建这个 API 函数
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()
const blog = ref(null)

const formatDate = (isoStr) => {
  if (!isoStr) return ''
  const d = new Date(isoStr)
  return d.toLocaleDateString() + ' ' + d.toLocaleTimeString()
}

onMounted(async () => {
  const id = route.params.id
  try {
    const res = await getBlogDetail(id)
    blog.value = res.data
  } catch (error) {
    ElMessage.error('加载博客失败')
    router.back()
  }
})
</script>
